@layout("/common/_container.html"){
<style>
    html{
        width:100%;
        overflow-x:hidden;
    }
    .uploadImage{
        font-size: 14px;
        height: 100%;
        background: #F9F9F9;
    }
    .uploadImageHeader{
        height: 3.5em;
        line-height: 3.5em;
        position: fixed;
        background: white;
        width: 100%;
        z-index: 1;
        border-bottom: 1px solid #E5E5E5;
        padding: 0 1em;
        display: flex;
    }
    .uploadImageHeader > div{
        flex: 1;
        color: #00a6c9;
    }
    .uploadImageHeader > div:nth-child(2){
        color: black;
        text-align: center;
        font-size: 18px;
    }

    .uploadImageContent{
        height: 100%;
        position: relative;
        padding-top: 3.7em;
    }
    .uploadImageContent > div{
        margin-bottom: 0.5em;
        background: white;
    }

    .uploadImageOption > div{
        border-bottom: 1px solid #E5E5E5;
        display: flex;
        padding: 0.8em;
        position: relative;
    }

    .uploadImageOption > div input{
        width: 100%;
        text-align: right;
        border: none;
        outline: none;
    }

    .uploadImageOption > div > div > span{
        position: absolute;
        right: 0.8em;
        top: 50%;
        transform: translateY(-50%);
    }

    .uploadImagePhoto > div{
        padding: 0.5em;
    }

    .head{
        width:100%;
        position:relative;
        z-index:110;
    }
    .head .btn-2{
        display:inline-block;
        width:5.1em;
        height:5.11em;
        background:url("https://pynnn.oss-cn-hangzhou.aliyuncs.com/weixin-img/jiahao.png") center no-repeat;
        background-size:cover;
        vertical-align: middle;
        margin: 0.5em;
    }
    .head .btn-2 input {
        width:5.1em;
        height:5.1em;
        opacity: 0;
    }
    #preview > img{
        width: 5.1em;
        height: 5.1em;
        margin: 0.5em;
    }
</style>
<div class="uploadImage">
    <div class="uploadImageHeader">
        <div onclick="patientDetails()">取消</div>
        <div>上传影像</div>
        <div style="text-align: right">上传</div>
    </div>
    <div class="uploadImageContent">
        <div class="uploadImageOption">
            <div>
                <div style="flex: 1">就诊时间</div>
                <div style="flex: 4">
                    <div><input type="text"></div>
                    <span class="glyphicon glyphicon-triangle-right"></span>
                </div>
            </div>
            <div>
                <div style="flex: 1">影像类型</div>
                <div style="flex: 4">
                    <div id="yinxiang"></div>
                    <span class="glyphicon glyphicon-triangle-right"></span>
                </div>
            </div>
        </div>
        <div class="uploadImagePhoto">
            <div>
                <div class="head"  id="preview">
                    <a id="uploadButton" class="btn-2">
                        <input type="file" accept="image/*" id="upload" multiple name="upload">
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="${ctxPath}/static/mobileSelect/js/mobileSelect.js"></script>
<link href="${ctxPath}/static/mobileSelect/css/mobileSelect.css" rel="stylesheet">
<script>
    var input = document.getElementById("upload");
    input.addEventListener('change',handleFile,false);

    //跳转到患者详情
    function patientDetails() {
        window.location.href = Feng.ctxPath + "/doctorLooked/doctor_patientDetails";
    }

    var mobileSelect1 = new MobileSelect({
        trigger: '#yinxiang',
        title: '请选择类型',
        wheels: [
            {data:['全景','小牙片','CBCT','照片','其他']}
        ],
        position:[2] //初始化定位
    });

    function handleFile(){
        var preview = document.getElementById('preview');
        var uploadButton = document.getElementById('uploadButton');

        if(typeof FileReader == undefined&&new FileReader().readAsDataURL){
            alert("您浏览器不支持上传图片！")
        }else {
            var files = input.files;
            for(var k=0;k<files.length;k++){
                if(!/image\/\w+/.test(files[k].type)){
                    alert("请选择正确的文件！")
                }else{
                    //此处可加入文件上传的代码
                    console.log(files[k].name+"文件已上传");
                    var reader = new FileReader();
                    reader.readAsDataURL(files[k]);
                    reader.onload = function(){
                        var img = document.createElement('img');
                        preview.insertBefore(img,uploadButton);
                        img.src = this.result;
                    }
                }
            }
        }
    }
</script>
@}